.chat-page { width: 100%; height: 100%; overflow: hidden; }

.chat-page .top { height: 44px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ccc; background-color: #fff; }

.chat-page .top .right, .chat-page .top .left { width: 40px; height: 100%; margin-left: 10px; display: flex; justify-content: center; align-items: center; }

.chat-page .top .right > img, .chat-page .top .left > img { width: 25px; height: 20px; }

.chat-page .top .right { margin-left: 0; margin-right: 10px; }

.chat-page .top .mid { width: 200px; height: 100%; display: flex; justify-content: space-evenly; align-items: center; }

.chat-page .top .mid > span { display: block; width: 32px; height: 44px; line-height: 47px; color: #999; font-weight: 600; text-align: center; }

.chat-page .top .mid .active { color: #f37748; border-bottom: 3px solid #f37748; }

.chat-page .tallmsg { height: 100%; overflow-y: scroll; }

.chat-page .tallmsg .message { margin-top: 10px; }

.chat-page .tallmsg .message .info { margin-bottom: 20px; }

.chat-page .tallmsg .message .info .info_top { width: 90%; height: 60px; margin: 0 auto; display: flex; justify-content: space-between; }

.chat-page .tallmsg .message .info .info_top .person_info { display: flex; align-items: center; }

.chat-page .tallmsg .message .info .info_top .person_info .toux { width: 35px; height: 35px; position: relative; z-index: 1; }

.chat-page .tallmsg .message .info .info_top .person_info .toux > img { width: 35px; height: 35px; border-radius: 50%; display: block; }

.chat-page .tallmsg .message .info .info_top .person_info .toux .v { width: 15px; height: 15px; position: absolute; right: -5px; bottom: 0; }

.chat-page .tallmsg .message .info .info_top .person_info .t { margin-left: 10px; }

.chat-page .tallmsg .message .info .info_top .person_info .t > h4 { font-size: 14px; font-weight: 600; }

.chat-page .tallmsg .message .info .info_top .person_info .t > span { display: block; margin-top: 2px; color: #999; font-size: 12px; }

.chat-page .tallmsg .message .info .info_top .n { display: flex; align-items: center; }

.chat-page .tallmsg .message .info .info_top .n > img { width: 40px; height: 40px; }

.chat-page .tallmsg .message .info .info_top .n .check { text-align: center; color: #f37748; font-weight: 700; font-size: 14px; padding: 5px 6px; border-radius: 4px; background-color: #fef3ef; }

.chat-page .tallmsg .message .info .info_mid { width: 90%; margin: 0 auto; }

.chat-page .tallmsg .message .info .info_mid .six { width: 100%; display: flex; flex-wrap: wrap; }

.chat-page .tallmsg .message .info .info_mid .six li { width: 32%; height: 32%; margin: 2px; border-radius: 8px; overflow: hidden; }

.chat-page .tallmsg .message .info .info_mid .six li img { width: 100%; border-radius: 8px; }

.chat-page .tallmsg .message .info .info_mid .six li .big { position: fixed; top: 0; left: 0; right: 0; width: 100%; min-height: 667px; display: flex; align-items: center; justify-content: center; background-color: #000; z-index: 100; overflow: hidden; }

.chat-page .tallmsg .message .info .info_mid .six li .big .img { width: 100%; height: 300px; background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: #fff; }

.chat-page .tallmsg .message .info .info_mid .four { width: 100%; display: flex; flex-wrap: wrap; }

.chat-page .tallmsg .message .info .info_mid .four li { width: 33%; height: 33%; margin: 2px; border-radius: 8px; overflow: hidden; }

.chat-page .tallmsg .message .info .info_mid .four li img { width: 100%; border-radius: 8px; }

.chat-page .tallmsg .message .info .info_mid .four li .big { position: fixed; top: 0; left: 0; right: 0; width: 100%; min-height: 667px; display: flex; align-items: center; justify-content: center; background-color: #000; z-index: 100; overflow: hidden; }

.chat-page .tallmsg .message .info .info_mid .four li .big .img { width: 100%; height: 300px; background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: #fff; }

.chat-page .tallmsg .message .info .info_mid .one { width: 100%; display: flex; flex-wrap: wrap; }

.chat-page .tallmsg .message .info .info_mid .one li { width: 100%; height: 140px; margin: 2px; border-radius: 8px; overflow: hidden; }

.chat-page .tallmsg .message .info .info_mid .one li img { width: 100%; border-radius: 8px; }

.chat-page .tallmsg .message .info .info_mid .one li .big { position: fixed; top: 0; left: 0; right: 0; width: 100%; min-height: 667px; display: flex; align-items: center; justify-content: center; background-color: #000; z-index: 100; overflow: hidden; }

.chat-page .tallmsg .message .info .info_mid .one li .big .img { width: 100%; height: 300px; background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: #fff; }

.chat-page .tallmsg .message .info .info_mid > h4 { margin: 10px 0 15px 0; font-weight: 550; font-size: 14px; }

.chat-page .tallmsg .message .info .info_bot { width: 90%; margin: 0 auto; }

.chat-page .tallmsg .message .info .info_bot .bot-t { display: flex; }

.chat-page .tallmsg .message .info .info_bot .bot-t .inp { flex: 1; padding: 8px 0px 8px 15px; border-radius: 15px; background-color: #f7f7f7; display: flex; justify-content: space-between; align-items: center; }

.chat-page .tallmsg .message .info .info_bot .bot-t .inp > span { color: #999; font-size: 12px; letter-spacing: 1.2px; }

.chat-page .tallmsg .message .info .info_bot .bot-t .inp .emo { width: 100px; display: flex; justify-content: space-evenly; }

.chat-page .tallmsg .message .info .info_bot .bot-t .inp .emo > img { width: 15px; height: 15px; }

.chat-page .tallmsg .message .info .info_bot .bot-t .zan { display: flex; align-items: center; margin-left: 10px; }

.chat-page .tallmsg .message .info .info_bot .bot-t .zan > img { width: 15px; height: 15px; margin-right: 5px; }

.chat-page .tallmsg .message .info .info_bot .bot-t .zan > span { font-size: 14px; font-weight: 600; }

.chat-page .tallmsg .message .info .info_bot .bot-b { width: 90%; margin-top: 15px; display: flex; font-size: 13px; color: #999; justify-content: flex-start; }

.chat-page .tallmsg .message .info .info_bot .bot-b > span { display: block; margin-right: 15px; }

.chat-page .tallmsg::-webkit-scrollbar { display: none; }
